<template>
  <view class="search-box" style="font-size: 14px;">
    <public-header bgColor="#28322B" textColor="#fff" title="库存查询"></public-header>
    <view style="background:rgba(245, 245, 245, 1);height:calc(100vh - 6rem);" class="content">

      <view class="left">
        <!-- 	<view
							style="display: flex;align-items: center;background: rgba(255, 255, 255, 1);height: 6rem;padding: 20px 10px;box-shadow: 0px 2px 10px 0px rgba(229, 229, 229, 0.64);">
							<image style="width:2rem;height: 3rem;margin-right: 4rem;"
								:src="require(`./static/path2.png`)"></image>
							<view style="font-weight: 800;font-size: 16px;">库存查询</view>
						</view> -->
        <view class="" style="padding: 1rem 1rem 0;">
          <uni-easyinput primaryColor="#38C09E" v-model="goodName" placeholder="商品名称/商品条码" />
        </view>


        <view style="overflow-y: hidden;flex: 1;display: flex;padding: 1rem;align-items: flex-start;">
          <!--    <view class="tree-box" style="flex: 1;overflow-y: hidden;">
                <gtree ref="xyTree" :treeData="treeData"
                  :replaceFields="{ children: 'children', key:`no`, name:`classify_name`}" @cnecked="treeChecked"
                  @afterTreeInit="treeChecked"></gtree>
              </view> -->
          <uni-data-picker v-model="classifyList" :allow-select-branch="true" :localdata="treeData"
            :map="{text:'classify_name',value:'classify_name'}" popup-title="请选择" @change="treeChecked">
          </uni-data-picker>
          <button style="margin-left: 1rem;width: 15rem;height: 6.8rem;line-height: 6.8rem;" class=""
            @click="toSearch">查询</button>
        </view>
      </view>

      <view class="right">
        <view class="right-top">
          <view class="loading-box" style="" v-if="loading===true">
            <u-loading-icon text="加载中" size="48" textSize="24"></u-loading-icon>
          </view>
          <zb-table :columns="column" :stripe="true" :border="true" :data="list"></zb-table>
        </view>
        <view class="page-box" style="">
          <!-- <zhini-pagination :key="wiKey" :totalPage="totalPage" :currentPage.sync="pageNo" @pageNum="getNum">
              </zhini-pagination> -->
          <uni-pagination show-icon="false" :total="total" :pageSize="rowNumber" :current="pageNo" @change="changePage">
          </uni-pagination>
        </view>

      </view>

    </view>

  </view>
  </view>
</template>


<script>
  import {
    getClassify
  } from '@/common/api/goods.js'
  import lockscreen from '@/common/mixins/lockscreen.js'
  import gtree from '@/components/g-tree-select/g-tree-select.vue'
  export default {
    mixins: [lockscreen],
    components: {
      gtree
    },
    data() {
      return {
        service: 'srvretail_store_info_detail_select',
        list: [],
        loading: false,
        pageNo: 1,
        rowNumber: 10,
        totalPage: 14,
        total: 0,
        classValue: null,
        goodName: '',
        treeData: [],
        classifyList: [],
        wiKey: '1',
        column: [{
            name: 'goods_type',
            label: '商品类别',
            // fixed: true,

            width: 20,
            emptyString: '--',
            align: 'center',
          },
          {
            name: 'goods_barcode',
            label: '商品条码',
            // fixed: true,
            width: 40,
            align: 'center',
          },
          {
            name: 'goods_name',
            label: '商品名称',
            width: 60,
            align: 'center',
            // filters: {
            // 	0: '男',
            // 	1: '女'
            // }
          },
          {
            name: 'supplier',
            label: '供应商',
            align: 'center',
            width: 20,
          },
          {
            name: 'goods_unit',
            label: '单位',
            width: 20,
            align: 'center',
          },

          {
            name: 'stock_num',
            label: '当前库存',
            width: 20,
            align: 'center',
          },
          {
            name: 'max_stock',
            label: '最高库存',
            width: 20,
            align: 'center',
          },
          {
            name: 'min_stock',
            label: '最低库存',
            width: 20,
            align: 'center',
          },
          {
            name: 'purchase_price',
            label: '进货价',
            width: 30,
            align: 'center',
          },
          {
            name: 'stock_amount',
            label: '库存金额',
            width: 30,
            align: 'center',
          },
          // {
          // 	name: 'create_time',
          // 	label: '创建时间',
          // 	width: 40,
          // 	align: 'center',
          // }
        ],
      }
    },
    computed: {
      storeNo() {
        return this.tenantInfo?.tenant_no
      }
    },
    onLoad() {
      // return
      // let serviece = {

      //   colNames: ["*"],
      //   condition: [],
      //   page: {
      //     pageNo: 1,
      //     rownumber: 99999
      //   },
      //   serviceName: "srvretail_goods_classify_select"
      // };



      // let makeChain = (array, parentNode) => {
      //   let startNode = null;
      //   let nowNode = null;
      //   for (let i = 0; i < array.length; i++) {
      //     let item = array[i];

      //     item.children = [];
      //     if (!item.parent_no) {
      //       parentNode.push(item);
      //     } else {

      //       if (!startNode) {
      //         startNode = item;

      //       }

      //       if (!nowNode) {
      //         nowNode = item;
      //         nowNode.preNode = null
      //       }

      //       item.preNode = nowNode;
      //       nowNode.nextNode = item

      //       nowNode = item;


      //     }



      //   }

      //   return startNode;
      // }

      // let recuisionChain = (chain, compareNode, result) => {
      //   // let nKey = 'no';
      //   // let nLabel = "classify_name";


      //   if (chain.parent_no == compareNode.no) {
      //     compareNode.children.push(chain);
      //     let preNode = chain.preNode;
      //     let nextNode = chain.nextNode;
      //     chain.isFind = true;
      //     chain.nextNode = nextNode;



      //     recuisionChain(chain, chain, result);

      //   } else {
      //     let nowNode = chain;
      //     while (nowNode.nextNode) {
      //       nowNode = nowNode.nextNode;
      //       if (nowNode.parent_no == compareNode.no) {
      //         compareNode.children.push(nowNode);
      //         let preNode = nowNode.preNode;
      //         let nextNode = nowNode.nextNode;
      //         nowNode.isFind = true;
      //         preNode.nextNode = nextNode;
      //         if (nextNode) {
      //           nextNode.preNode = preNode;
      //         }
      //         recuisionChain(chain, nowNode);
      //       }
      //     }
      //   }
      // }
      getClassify().then(res => {
        console.log(res);
        this.treeData = res
      })
      this.getTableData();
      // this.$fetch('select', 'srvretail_goods_classify_select', serviece).then((res) => {
      //   let array = [...res.data];
      //   let parentNode = [];
      //   let chain = makeChain(array, parentNode);
      //   // let result = [];
      //   // debugger
      //   /*
      //    * 递归把商品费雷给成children
      //    */
      //   parentNode.forEach((item, index) => {
      //     recuisionChain(chain, item, );
      //   })
      //   this.treeData = parentNode;
      //   console.log(parentNode, "==parentNode==")
      // })
    },
    methods: {
      clear() {
        this.wiKey = this.getUuid();
        this.pageNo = 1;
        this.goodName = "";
        this.classValue = ''
        this.classifyList = []
        this.getTableData();
      },
      search() {
        this.wiKey = this.getUuid();
        this.pageNo = 1;
        this.getTableData()

      },
      changePage(e) {
        const {
          type,
          current
        } = e
        this.pageNo = current
        this.getTableData()
      },
      getNum(e) {
        console.log("选中的页面是-->", e)
        this.pageNo = e;
        this.getTableData()
      },
      getTableData() {
        // uni.showLoading({
        //   title: "加载中"
        // })
        const url = `/retail/select/srvretail_store_stock_select`;
        let data = []

        if (this.classValue) {
          data = [{
            colName: 'goods_type',
            ruleType: 'eq',
            value: this.classValue
          }]
        }
        const req = {
          "serviceName": "srvretail_store_stock_select",
          "colNames": ["*"],
          "condition": [

          ],
          // "relation_condition": {
          //   "relation": "AND",
          //   "data": data
          // },
          "page": {
            "pageNo": this.pageNo,
            "rownumber": this.rowNumber
          },
          "order": [],
          "draft": false,
          "query_source": "list_page"
        }

        if (this.goodName != "") {
          data.push({
            colName: 'goods_name',
            ruleType: 'like',
            value: this.goodName
          })
          data.push({
            colName: 'goods_barcode',
            ruleType: 'like',
            value: this.goodName
          })
        }
        req.relation_condition = {
          "relation": "OR",
          "data": data
        }

        this.$http.post(url, req).then(res => {
          if (res?.data?.state === 'SUCCESS') {

            this.list = res.data.data;

            // this.list = [...this.list];

            this.pageNo = res.data.page.pageNo;
            this.totalPage = Math.ceil(res.data.page.total / res.data.page.rownumber)
            this.total = res.data?.page?.total
          }

          uni.hideLoading()
        }).catch(_ => {
          uni.hideLoading()
        })
        setTimeout(()=>{
          uni.hideLoading()
        },5000)
        // srvretail_store_stock_select?srvretail_store_stock_select	
      },
      toSearch() {
        this.getTableData();
      },
      treeChecked(item) {
        // source
        this.pageNo = 1;
        this.wiKey = this.getUuid();
        let classify_name = item?.source?.classify_name
        if (Array.isArray(item?.detail?.value) && item?.detail?.value.length > 0) {
          classify_name = item?.detail?.value[item?.detail?.value.length - 1].text
        }
        if (item) {
          this.classValue = classify_name;
          // this.getTableData();
        } else {
          this.classValue = null;
          // this.getTableData();
        }


        // console.log(item, "what is item==")
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .uni-easyinput {
    .uni-input-wrapper {
      .uni-input-placeholder {
        font-size: 2.4rem;
      }

      font-size:2.4rem;
    }
  }

  ::v-deep .selected-list {
    padding: 0 1rem;
    font-size: 2.4rem;
    line-height: 3rem;
  }

  ::v-deep .input-placeholder {
    font-size: 2.4rem;
    line-height: 3rem;
  }

  ::v-deep .uni-data-tree-input .placeholder {
    padding: 0 1rem;
    font-size: 2.4rem;
    line-height: 3rem;
  }



  .loading-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 50rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.7);
  }



  .search-box {
    width: 100vw;

    ::v-deep .zb-table-content .zb-table-scroll {
      height: 100%;
      overflow: hidden;
    }

    .content {
      display: flex;

      .left {
        width: 30vw;
        height: calc(100vh - 6rem);
        padding-bottom: 10rem;
        background-color: white;
        display: flex;
        flex-direction: column;
        margin-right: 1rem;

      }

      .right {
        width: 70vw;
        display: flex;
        flex-direction: column;
        height: 100%;
        background: rgba(255, 255, 255, 1);

        &-top {
          flex: 1;
          position: relative;
          overflow-y: scroll;
        }

        .page-box {
          // border-top: 1px solid #f5f5f5;
          height: 10rem;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 20px;
        }
      }
    }
  }



  // .tree-box /deep/ .text-lg {
  //   font-size: 18px;

  // }

  .input-box {
    padding-left: 8rem;
  }

  .input-box /deep/ uni-input {
    min-height: unset !important;
  }

  .search-button {
    width: 6rem;
    height: 6.8rem;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    text-align: center;
    line-height: 6.8rem;

    &:active {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  .search-input {
    padding-left: 6rem;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 1rem;
    height: 6.8rem;
  }

  .clear-button {
    background: rgb(245, 245, 245);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0px;
    border-radius: 3px;
    height: 6.8rem;
    width: 12rem;
    color: black;
    font-weight: 600;
    top: 0px;
  }
</style>
